@extends('frontend/layouts/bootstrap')

@section('content')
<div>
    <span style="font-size: 31.5px;  line-height: 40px;  margin: 10px 0;  font-family: inherit;  font-weight: bold;  color: inherit;  text-rendering: optimizelegibility;  -webkit-margin-before: 0.83em;  -webkit-margin-after: 0.83em;  -webkit-margin-start: 0px;  -webkit-margin-end: 0px;">  Container attachment {{ $container->container_id}} {{ $container->container_no}} </span>
    {{ link_to_route('car_balance.container.confirmed', 'Return to Confirmed Container list', null, array('class' => 'btn btn-info', 'style' => 'float: right; margin: 10px 0;')) }}
</div>
<div>
   <div id="dropzone-btn" class="btn"> Show Upload/Drop </div> <input type="checkbox" id="dropzone-remember-me"/> Remember Upload/Drop
</div>
<br>
<div class="alert fade in hide"> <button type="button" class="close" data-dismiss="alert">× </button> <p></p> </div>
@if ($attachments && $attachments->count())
<div class="container-wrapper attachments">
    <table class="table table-bordered table-condensed table-hover">
        <thead style="background-color: #f0f0f0; white-space:nowrap;">
        <tr>
            <th>Seq</th>
            <th>Code</th>
            <th>Content</th>
            <th>Memo</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody style="font-size: 11px;">
        <?php $codenames = array(); foreach($codes as $c){ $codenames[$c->code]=$c;}?>
        @foreach($attachments as $d)
        <tr>
            <td> {{$d->seq}} </td>
            <td> @if (isset($codenames[$d->code])) {{ $codenames[$d->code]->name }} @else -- {{$d->code}} @endif</td>
            <td> {{ link_to_route('car_balance.attach.action', basename($d->content), array('do'=>'show','id'=>$d->id,'seq'=>$d->seq), array('target'=>'_blank')) }} </td>
            <td> {{$d->memo}} </td>
            <td> 
              {{ link_to_route('car_balance.attach.action', 'Update(Code/Memo)', array('do'=>'update','id'=>$d->id,'seq'=>$d->seq, 'back'=>Request::url()), array('data-update')) }} /
              {{ link_to_route('car_balance.attach.action', 'Delete', array('do'=>'delete','id'=>$d->id,'seq'=>$d->seq, 'back'=>Request::url()) , array('data-delete')) }} 
            </td>
        </tr>
        @endforeach
        </tbody>
    </table>
</div>
@endif

<div id="attach-form" class="row-fluid" style="padding:10px;margin:0;border:1px solid #0087f7;">
  <div id="dropzone" class="span5" style="padding:10px;">
    <form id="dropzone-upload" class="dropzone dz-clickable" action="#" style="min-height: 100px;border: 2px dashed #0087f7;"> <div class="dz-message"> Drop files here or click to upload.</div> {{ Form::token() }} </form>
  </div>
  <div class="span3" style="padding:0 10px;">
    Code
    @foreach($codes as $c)
    <div class="radio"><input type="radio" name="code" id="radio{{$c->code}}" value="{{$c->code}}" > <label for="{{$c->code}}"> {{$c->name}} </label> </div>
    @endforeach
  </div>
  <div class="span4" style="padding:0 10px;"> Memo <textarea name="memo" rows="5" cols="100" style="width: 90%;"></textarea></div>
</div>

<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" style="width:300px;">
  <div class="modal-body"></div>
  <div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><button class="btn btn-primary">Ok</button></div>
</div>

@stop

@section('pagestyles')
<link rel="stylesheet" type="text/css" href={{asset('assets/dz/css/dropzone.css')}} />
@stop

@section('pagescripts')
<script type="text/javascript" src={{asset('assets/dz/dropzone.js')}}></script>
<script type="text/javascript">
$(function(){
  Dropzone.autoDiscover = false;
  Dropzone.options.myDropzone = {paramName : "file",parallelUploads:5,maxFiles:5,maxFilesize:1.5};
  var myDropzone = new Dropzone("#dropzone",{url:"attach"});
  myDropzone.on("sending", function(file,xhr,formData) {
    //console.log(xhr);
    formData.append("_token", $('input[name=_token]').val());
    formData.append("code", $('input[name=code]:checked').val());
    formData.append("memo", $('textarea[name=memo]').val());
    //formData.append("seq", create new seq);
    //formData.append("content", uploaded file);
    //formData.append("json", special datas);
  });
  myDropzone.on("complete", function(args) {
    eval('$result=' + args.xhr.responseText);
    if ($result.status=='error') { $(".alert").find('p').html($result.messages).parent().show();return; }
    if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) { $(".alert").find('p').html('Upload completed.').parent().show(); setTimeout("location.reload()",5000);}
  });
  $(".attachments a[data-update]").on('click',function(event){
    event.preventDefault();event.stopPropagation();
    $code = $('input[name=code]:checked').val();
    $memo = $('textarea[name=memo]').val();
    $('#confirm').find('.modal-body').html('<p>code='+ ($code ? $code : '') + '</p>' + '<p style="max-width:200px;">memo='+$memo + '</p>');
    $url = $(this).attr('href') + '&code=' + encodeURIComponent($code) + '&memo=' + encodeURIComponent($memo);
    // update code/memo 
    $('#confirm').modal().on('click', '.modal-footer .btn-primary', function(){ location.href = $url;});
    return false;
  });
  $(".attachments a[data-delete]").on('click',function(event){
      event.preventDefault();event.stopPropagation();
      // delete
      $('#confirm').find('.modal-body').html('<p>Are you sure delete ?</p>');
      $url = $(this).attr('href');
      $('#confirm').modal().on('click', '.modal-footer .btn-primary', function(){location.href = $url;});
      return false;
  });
  var createCookie = function(name, value, days) {
      var expires;
      if (days) { var date = new Date();date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));expires = "; expires=" + date.toGMTString();} else {expires = "";}
      document.cookie = name + "=" + value + expires + "; path=/";
  };
  function getCookie(c_name) {
    if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "=");
      if (c_start != -1) {
        c_start = c_start + c_name.length + 1;
        c_end = document.cookie.indexOf(";", c_start);
        if (c_end == -1) { c_end = document.cookie.length;}
        return unescape(document.cookie.substring(c_start, c_end));
      }
    }
    return "";
  }
  function resetDropzoneControl(init) {
    //console.log(init);
    if (init) {
      var data = getCookie('dropzone_remember_me');
      if (data) {
       //var obj = (new Function("return " + data))();
       var obj = JSON.parse(data);
       if (obj) {
         if (!obj.show) { $("#attach-form" ).toggle(); }
         if (obj.checked) { $("#dropzone-remember-me").prop('checked',true); }
       }
      }
      return;
    }
    var values = {"show": $('#dropzone').is(':visible'), "checked" : $("#dropzone-remember-me" ).prop('checked') };
    var day = values.checked ? 30 : null;
    createCookie('dropzone_remember_me', JSON.stringify(values), day);
  }

  $("#dropzone-btn" ).click(function() { $("#attach-form" ).toggle();resetDropzoneControl(false)});
  $("#dropzone-remember-me").click(function() { resetDropzoneControl(false)});
  resetDropzoneControl(true);
});
</script>

@stop